import styles from './index.module.less'
export default ()=> {
  return (
    <div className={styles.t}>
      <h2>transform</h2>
      <div style={{border:'1px solid red',width:'300px',height:'300px',position:"relative"}}>
        <div style={{backgroundColor:'blue',position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',}}>react</div>
      </div>
      <h2>scale</h2>
      <div style={{width:'200px',height:"200px",backgroundColor:"red",transform:'scale(1.3)'}}></div>
      <h2>渐变</h2>
      <div style={{width:'200px',height:"200px",backgroundImage:'linear-gradient(red,blue)'}}></div>
      <h2>3D:perspective更有立体感，近大远小，近实远虚</h2>
      <div className={styles.dh}>
        <div className={styles.dh_box}>react</div>
      </div>
      <div>roatexyz,原点在正中心</div>
      <h2> preserve-3d</h2>
      <div className={styles.pre}>
        <div className={styles.front}></div>
        <div className={styles.back}></div>
      </div>
      <div className={styles.example}>
        <div className={styles.hz}>首页</div>
        <div className={styles.yy}>index</div>
      </div>
      <h2>动画</h2>
      <div className={styles.anima}></div>
      
    </div>
    
  )
}